<template>
<div>
<!--  事项-->
  <Select v-model="model" style="width:200px;margin-right: 20px">
    <Option :value="'pc'" >pc端</Option>
    <Option :value="'app'">app端</Option>
  </Select>
  <Button type="primary" @click="select">搜索</Button>
  <template>
    <vxe-table
      style="margin-top: 20px"
      resizable
      border="inner"
      ref="xTree"
      :tree-config="{}"
      :data="data">
<!--      <vxe-table-column field="id" title="id" tree-node></vxe-table-column>-->
      <vxe-table-column field="text" width="90%" title="名称" tree-node></vxe-table-column>
      <vxe-table-column align="center" title="操作">
        <template v-slot="{ row }">
          <Button size="small" type="primary" @click="detail(row)">详情</Button>
        </template>
      </vxe-table-column>
    </vxe-table>
  </template>
  <Modal
    v-model="modal"
    title="详情">
    <template>
      <Form :model="row" :label-width="80">
        <FormItem label="事项id：">
          <Input v-model="row.org_id"></Input>
        </FormItem>
        <FormItem label="事项类型：">
          <Input v-model="row.type_name"></Input>
        </FormItem>
        <FormItem label="名称：">
          <Input v-model="row.text"></Input>
        </FormItem>
        <FormItem label="重点人群：">
          <Input v-model="row.focus_group"></Input>
        </FormItem>
        <FormItem label="文件图片：">
          <Input v-model="row.file_url"></Input>
        </FormItem>
        <FormItem label="表单图片：">
          <Input v-model="row.form_url"></Input>
        </FormItem>
      </Form>
    </template>
  </Modal>
</div>
</template>

<script>
import { getItemTypeList } from '@/api/eventlist'

export default {
  name: 'index',
  data () {
    return {
      modal: false,
      model: 'pc',
      columns: [
        {
          title: 'Name',
          key: 'name'
        },
        {
          title: 'Age',
          key: 'age'
        },
        {
          title: 'Address',
          key: 'address'
        }
      ],
      data: [],
      row: {}
    }
  },
  methods: {
    init () {
      let data = {
        type: this.model
      }
      getItemTypeList(data).then(ret => {
        if (ret.data.errcode === 0) {
          let result = ret.data.data
          result.forEach(item => {
            item.text = item.name
            item.children = item.datalist
          })
          this.data = result
        } else {
          this.$Notice.error({
            title: '查询列表失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    detail (e) {
      this.row = {}
      this.modal = true
      this.row = e
    },
    select () {
      this.init()
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>

</style>
